@charset "UTF-8";

.displayFlex{
  display: flex;
  display:-webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
}

.flex-direction-row{
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
  -moz-box-orient:horizontal;
  -moz-box-direction:normal;
  flex-direction:row;
  -webkit-flex-direction:row;
}
.flex-direction-column{
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -moz-box-orient:vertical;
  -moz-box-direction:normal;
  flex-direction:column;
  -webkit-flex-direction:column;
}

.flex-justify-content{
  -webkit-justify-content:center;
  justify-content:center;
  -moz-box-pack:center;
  -webkit-box-pack:center;
  box-pack:center;
}
.flex-justify-right{
  -webkit-justify-content: flex-end;
  justify-content:flex-end;
  -moz-box-pack:end;
  -webkit-box-pack:end;
  box-pack:end;
}


.flex-justify-between{
  -webkit-justify-content: space-between;
  justify-content:space-between;
  -moz-box-pack:justify;
  -webkit-box-pack:justify;
  box-pack:space-between;
}


.flex-align-items {
  align-items: center;
  -webkit-align-items:center;
  box-align:center;
  -moz-box-align:center;
  -webkit-box-align:center;

}


.flex-align-end {
  align-items: end;
  -webkit-align-items: flex-end;
  -moz-box-align:end;
  -webkit-box-align:end;

}





.flex-wrap{
  -webkit-flex-wrap:wrap;
  -webkit-box-lines:multiple;
  -moz-flex-wrap:wrap;
  flex-wrap:wrap;
}


.flex-1{
  -moz-box-flex: 1.0; /*Firefox*/
  -webkit-box-flex: 1.0; /*Safari,Opera,Chrome*/
  box-flex: 1.0;
  flex:1;
}

.flex-justify-align{
  display: flex;
  display:-webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-justify-content:center;
  justify-content:center;
  -moz-box-pack:center;
  -webkit-box-pack:center;
  box-pack:center;
  align-items:center;
  -webkit-align-items:center;
  box-align:center;
  -moz-box-align:center;
  -webkit-box-align:center;
}

.justify-align{
  -webkit-justify-content:center;
  justify-content:center;
  -moz-box-pack:center;
  -webkit-box-pack:center;
  box-pack:center;
  align-items:center;
  -webkit-align-items:center;
  box-align:center;
  -moz-box-align:center;
  -webkit-box-align:center;
}


.flex-justify{
  display: flex;
  display:-webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-justify-content:center;
  justify-content:center;
  -moz-box-pack:center;
  -webkit-box-pack:center;
  box-pack:center;
}

.border_bottom (@color){
  &:before {
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 1px;
    border-bottom: 1px solid @color;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }
}
.border_top (@color){
  &:before {
    position: absolute;
    top: -1px;
    left: 0;
    content: '';
    width: 100%;
    height: 1px;
    border-bottom: 1px solid @color;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }
}
.border_right(@color){
  &:before {
    position: absolute;
    top: 0;
    right: -1px;
    left: 0;
    content: '';
    height: 100%;
    width: 1px;
    border-bottom: 1px solid @color;
    -webkit-transform: scaleX(0.5);
    transform: scaleX(0.5);
  }
}
.border_left(@color){
  &:before {
    position: absolute;
    top: 0;
    left: -1px;
    right: 0;
    content: '';
    height: 100%;
    width: 1px;
    border-bottom: 1px solid @color;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }
}



















